<template>
    <div id="app">
        <detail-section title="房屋设施" foottext="查看全部设施">
            <div class="body">
                <template v-for="(value,i) in facility_data?.houseFacilitys" :key="i">
                <div class="body-item">
                    <template v-if="facility_data?.facilitySort.includes(value.groupId)">
                    <div class="item-left">
                        <img :src="value.icon" alt=""/>
                        <span>{{value.groupName}}</span>
                    </div>
                    <div class="item-right">
                        <div v-for="(item,index) in value.facilitys" :key="index">
                          <img style="width:10px;height:10px;margin-right: 3px;" src="@/assets/img/detail/icon_check.png" alt="">  {{item.name}}
                    </div>
                    </div>
                </template>
                </div>
            </template>
            </div>
        </detail-section>
    </div>
</template>

<script setup>
import detailSection from './detail-section.vue'
defineProps({
    facility_data: {
        type: Object,
        defineProps: () => ({})
    }
})
</script>
 
<style lang="less" scoped>
.body{
    background-color: rgb(247,249,251);
    padding: 30px;
    .body-item{
        .item-left{
            img{
                width: 40px;
                height: 40px;
                margin-left: 23px;
            }
            span{
                text-align: center;
            }
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            // text-align: center;
            // background-color: skyblue;
            width: 30%;
            // background-color: chartreuse;
        }
        height: 33%;
        display: flex;
        .item-right{
            width: 70%;
            // background-color: red;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            overflow: hidden;
            div{
                font-size: 12px;
                width: 50%;
                height: 39%;
                padding-left: 5px;
                box-sizing: border-box;
                overflow: hidden;
                // background-color: red;
                // padding: 10px;
                // height: 50%;
                // line-height: 20px;
            }
        }
    }
}
</style>